<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日精选 - 暖言树洞</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="page">
        <!-- Header -->
        <div class="page-header">
            <button class="header-back">
                <i class="fas fa-arrow-left"></i>
            </button>
            <h1 class="header-title">每日精选</h1>
            <button class="header-action" onclick="shareDaily()">
                <i class="fas fa-share"></i>
            </button>
        </div>

        <!-- Main Content -->
        <div class="page-content">
            <!-- Date Selector -->
            <div class="card mb-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="font-semibold text-lg mb-1">今日精选</h2>
                        <p class="text-sm text-neutral-500" id="currentDate">2025年1月6日 星期一</p>
                    </div>
                    <button class="btn btn-outline btn-sm" onclick="showDatePicker()">
                        <i class="fas fa-calendar mr-1"></i>
                        选择日期
                    </button>
                </div>
            </div>

            <!-- Daily Quote -->
            <div class="card card-gradient mb-6 text-center">
                <div class="mb-4">
                    <div class="text-3xl mb-3">💫</div>
                    <h3 class="font-semibold mb-2">每日暖心语录</h3>
                    <blockquote class="text-sm italic leading-relaxed">
                        "生活中的小确幸，就像夜空中的星星，虽然微小，却能照亮整个心房。愿你每天都能发现属于自己的那颗星。"
                    </blockquote>
                </div>
                <div class="text-xs opacity-75">
                    — 暖言树洞 AI猫猫
                </div>
            </div>

            <!-- Featured Stats -->
            <div class="grid grid-cols-3 gap-3 mb-6">
                <div class="card text-center">
                    <div class="text-xl font-bold text-primary mb-1">15</div>
                    <div class="text-xs text-neutral-600">精选日记</div>
                </div>
                <div class="card text-center">
                    <div class="text-xl font-bold text-secondary mb-1">234</div>
                    <div class="text-xs text-neutral-600">暖心点评</div>
                </div>
                <div class="card text-center">
                    <div class="text-xl font-bold text-warning-500 mb-1">4.9</div>
                    <div class="text-xs text-neutral-600">平均暖心度</div>
                </div>
            </div>

            <!-- Trending Topics -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-fire mr-2 text-error-500"></i>
                    今日热门话题
                </h3>
                <div class="flex flex-wrap gap-2">
                    <span class="topic-tag">#治愈系</span>
                    <span class="topic-tag">#小确幸</span>
                    <span class="topic-tag">#正能量</span>
                    <span class="topic-tag">#温暖瞬间</span>
                    <span class="topic-tag">#友情</span>
                    <span class="topic-tag">#成长感悟</span>
                    <span class="topic-tag">#感恩</span>
                    <span class="topic-tag">#希望</span>
                </div>
            </div>

            <!-- Featured Diaries -->
            <div class="mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-crown mr-2 text-warning-500"></i>
                    精选日记
                </h3>

                <!-- Featured Diary 1 -->
                <div class="card card-hover mb-4">
                    <div class="flex items-start mb-3">
                        <span class="mood-emoji">😊</span>
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="font-semibold">今天的阳光很温暖</h4>
                                <div class="flex items-center">
                                    <div class="warmth-stars mr-2">
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star-half-alt warmth-star text-xs"></i>
                                    </div>
                                    <span class="text-xs text-neutral-500">4.5分</span>
                                </div>
                            </div>
                            <p class="text-sm text-neutral-600 leading-relaxed mb-3">
                                走在路上看到小猫咪晒太阳，突然觉得生活还是很美好的。即使最近工作有些忙碌，但是这样的小瞬间总能让人重新燃起对生活的热爱...
                            </p>
                            <div class="flex items-center justify-between text-xs text-neutral-500">
                                <div class="flex items-center gap-3">
                                    <span>匿名用户 · 上午 10:30</span>
                                    <div class="flex items-center gap-3">
                                        <span><i class="fas fa-heart mr-1 text-secondary"></i>156</span>
                                        <span><i class="fas fa-comment mr-1 text-primary"></i>23</span>
                                        <span><i class="fas fa-paper-plane mr-1 text-info-500"></i>45次漂流</span>
                                    </div>
                                </div>
                                <span class="bg-warning-100 text-warning-700 px-2 py-1 rounded-full text-xs font-medium">
                                    👑 今日最暖心
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="bg-primary-50 rounded-lg p-3">
                        <div class="text-xs text-primary font-medium mb-1">精选理由</div>
                        <p class="text-xs text-neutral-700">这篇日记用简单朴实的语言传达了对生活的热爱，激发了读者对美好事物的感知力，获得了众多用户的共鸣。</p>
                    </div>
                </div>

                <!-- Featured Diary 2 -->
                <div class="card card-hover mb-4">
                    <div class="flex items-start mb-3">
                        <span class="mood-emoji">💪</span>
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="font-semibold">终于战胜了自己</h4>
                                <div class="flex items-center">
                                    <div class="warmth-stars mr-2">
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                    </div>
                                    <span class="text-xs text-neutral-500">5.0分</span>
                                </div>
                            </div>
                            <p class="text-sm text-neutral-600 leading-relaxed mb-3">
                                连续一周每天早起跑步，今天终于坚持下来了！虽然过程很累，但是看到自己的改变真的很开心。原来自律真的可以带来自由...
                            </p>
                            <div class="flex items-center justify-between text-xs text-neutral-500">
                                <div class="flex items-center gap-3">
                                    <span>匿名用户 · 下午 14:20</span>
                                    <div class="flex items-center gap-3">
                                        <span><i class="fas fa-heart mr-1 text-secondary"></i>89</span>
                                        <span><i class="fas fa-comment mr-1 text-primary"></i>34</span>
                                        <span><i class="fas fa-paper-plane mr-1 text-info-500"></i>28次漂流</span>
                                    </div>
                                </div>
                                <span class="bg-success-100 text-success-700 px-2 py-1 rounded-full text-xs font-medium">
                                    💪 最励志
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="bg-secondary-50 rounded-lg p-3">
                        <div class="text-xs text-secondary font-medium mb-1">精选理由</div>
                        <p class="text-xs text-neutral-700">分享了自我成长的真实体验，激励了很多正在努力改变的用户，传递了坚持和自律的正能量。</p>
                    </div>
                </div>

                <!-- Featured Diary 3 -->
                <div class="card card-hover mb-4">
                    <div class="flex items-start mb-3">
                        <span class="mood-emoji">🤗</span>
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="font-semibold">谢谢陌生人的温暖</h4>
                                <div class="flex items-center">
                                    <div class="warmth-stars mr-2">
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="far fa-star text-neutral-300 text-xs"></i>
                                    </div>
                                    <span class="text-xs text-neutral-500">4.3分</span>
                                </div>
                            </div>
                            <p class="text-sm text-neutral-600 leading-relaxed mb-3">
                                昨天在地铁上丢了钱包，一个大叔帮我找到并送到失物招领处。虽然我们素不相识，但那一刻感受到了人间真情...
                            </p>
                            <div class="flex items-center justify-between text-xs text-neutral-500">
                                <div class="flex items-center gap-3">
                                    <span>匿名用户 · 晚上 20:15</span>
                                    <div class="flex items-center gap-3">
                                        <span><i class="fas fa-heart mr-1 text-secondary"></i>124</span>
                                        <span><i class="fas fa-comment mr-1 text-primary"></i>18</span>
                                        <span><i class="fas fa-paper-plane mr-1 text-info-500"></i>52次漂流</span>
                                    </div>
                                </div>
                                <span class="bg-info-100 text-info-700 px-2 py-1 rounded-full text-xs font-medium">
                                    🤗 最感人
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="bg-info-50 rounded-lg p-3">
                        <div class="text-xs text-info-600 font-medium mb-1">精选理由</div>
                        <p class="text-xs text-neutral-700">展现了社会中的温暖互助，传递了对人性美好的信念，让读者重新相信善意的力量。</p>
                    </div>
                </div>
            </div>

            <!-- Best Comments -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-gem mr-2 text-secondary"></i>
                    精彩点评
                </h3>
                
                <div class="space-y-4">
                    <div class="border-l-4 border-primary pl-4">
                        <p class="text-sm leading-relaxed mb-2">
                            "看到你的分享让我想起了自己昨天遇到的温暖瞬间。生活中真的有太多美好值得我们去发现和珍惜。愿我们都能保持这份感受美好的能力。"
                        </p>
                        <div class="flex items-center justify-between text-xs text-neutral-500">
                            <span>匿名用户A · 回复《今天的阳光很温暖》</span>
                            <div class="flex items-center">
                                <i class="fas fa-heart mr-1 text-secondary"></i>
                                <span>45</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="border-l-4 border-secondary pl-4">
                        <p class="text-sm leading-relaxed mb-2">
                            "你的坚持真的很棒！我也想开始每天跑步了。有时候我们需要的不是完美的开始，而是勇敢的第一步。谢谢你的分享给了我动力。"
                        </p>
                        <div class="flex items-center justify-between text-xs text-neutral-500">
                            <span>匿名用户B · 回复《终于战胜了自己》</span>
                            <div class="flex items-center">
                                <i class="fas fa-heart mr-1 text-secondary"></i>
                                <span>32</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="border-l-4 border-info-500 pl-4">
                        <p class="text-sm leading-relaxed mb-2">
                            "这个世界还是有很多善良的人啊！你的经历让我相信，我们每个人的小小善举都能让这个世界变得更美好。传递温暖，从我做起！"
                        </p>
                        <div class="flex items-center justify-between text-xs text-neutral-500">
                            <span>匿名用户C · 回复《谢谢陌生人的温暖》</span>
                            <div class="flex items-center">
                                <i class="fas fa-heart mr-1 text-secondary"></i>
                                <span>28</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Share Section -->
            <div class="card bg-gradient-to-r from-primary-50 to-secondary-50 text-center">
                <div class="mb-4">
                    <div class="text-2xl mb-2">📱</div>
                    <h3 class="font-semibold mb-2">分享今日精选</h3>
                    <p class="text-sm text-neutral-600">将这些温暖的故事分享给更多人</p>
                </div>
                <button onclick="shareDaily()" class="btn btn-primary">
                    <i class="fas fa-share mr-2"></i>
                    分享给朋友
                </button>
            </div>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // 每日精选页面管理器
        class DailyFeaturedManager {
            constructor() {
                this.currentDate = new Date();
                this.init();
            }

            init() {
                this.updateCurrentDate();
                this.initAnimations();
                this.bindEvents();
            }

            updateCurrentDate() {
                const dateElement = document.getElementById('currentDate');
                if (dateElement) {
                    const options = { 
                        year: 'numeric', 
                        month: 'long', 
                        day: 'numeric', 
                        weekday: 'long' 
                    };
                    dateElement.textContent = this.currentDate.toLocaleDateString('zh-CN', options);
                }
            }

            initAnimations() {
                const cards = document.querySelectorAll('.card');
                cards.forEach((card, index) => {
                    setTimeout(() => {
                        card.style.animation = 'fadeInUp 0.5s ease forwards';
                    }, index * 100);
                });
            }

            bindEvents() {
                // 绑定话题标签点击事件
                const topicTags = document.querySelectorAll('.topic-tag');
                topicTags.forEach(tag => {
                    tag.addEventListener('click', () => {
                        this.searchByTopic(tag.textContent);
                    });
                });

                // 绑定日记卡片点击事件
                const diaryCards = document.querySelectorAll('.card-hover');
                diaryCards.forEach(card => {
                    card.addEventListener('click', () => {
                        this.viewDiaryDetail(card);
                    });
                });
            }

            searchByTopic(topic) {
                App.utils.showToast(`搜索话题: ${topic}`, 'info');
                // 这里可以实现话题搜索功能
            }

            viewDiaryDetail(card) {
                // 模拟跳转到日记详情
                const title = card.querySelector('h4').textContent;
                App.utils.showToast(`查看《${title}》详情`, 'info');
                // window.location.href = 'diary-detail.html?featured=true&title=' + encodeURIComponent(title);
            }

            showDatePicker() {
                // 简单的日期选择实现
                const dateString = prompt('请输入日期 (格式: YYYY-MM-DD):', this.formatDate(this.currentDate));
                if (dateString) {
                    const newDate = new Date(dateString);
                    if (!isNaN(newDate.getTime())) {
                        this.currentDate = newDate;
                        this.updateCurrentDate();
                        this.loadFeaturedContent();
                        App.utils.showToast('已切换到选择的日期', 'success');
                    } else {
                        App.utils.showToast('日期格式不正确', 'error');
                    }
                }
            }

            formatDate(date) {
                return date.toISOString().split('T')[0];
            }

            loadFeaturedContent() {
                // 模拟加载不同日期的精选内容
                App.utils.showToast('正在加载精选内容...', 'info');
                
                // 这里可以根据日期加载对应的精选内容
                setTimeout(() => {
                    App.utils.showToast('精选内容已更新', 'success');
                }, 1000);
            }

            shareDaily() {
                const shareData = {
                    title: '暖言树洞 - 每日精选',
                    text: '来看看今天的温暖精选，感受生活中的美好瞬间！',
                    url: window.location.href
                };

                if (navigator.share) {
                    navigator.share(shareData);
                } else {
                    // 复制链接
                    navigator.clipboard.writeText(window.location.href).then(() => {
                        App.utils.showToast('链接已复制到剪贴板', 'success');
                    });
                }
            }
        }

        // 全局函数
        function showDatePicker() {
            if (window.dailyManager) {
                dailyManager.showDatePicker();
            }
        }

        function shareDaily() {
            if (window.dailyManager) {
                dailyManager.shareDaily();
            }
        }

        // 页面初始化
        let dailyManager;
        
        document.addEventListener('DOMContentLoaded', function() {
            dailyManager = new DailyFeaturedManager();
        });
    </script>

    <style>
        /* 话题标签样式 */
        .topic-tag {
            display: inline-block;
            background: var(--primary-100);
            color: var(--primary-700);
            padding: 0.25rem 0.75rem;
            border-radius: var(--rounded-full);
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-normal);
        }

        .topic-tag:hover {
            background: var(--primary-200);
            color: var(--primary-800);
            transform: translateY(-1px);
        }

        /* 网格布局 */
        .grid {
            display: grid;
        }

        .grid-cols-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        /* 间距 */
        .space-y-4 > * + * {
            margin-top: 1rem;
        }

        /* 引用样式 */
        blockquote {
            position: relative;
            padding: 0 1rem;
        }

        /* 左边框样式 */
        .border-l-4 {
            border-left-width: 4px;
            border-left-style: solid;
        }

        .border-primary {
            border-left-color: var(--primary-500);
        }

        .border-secondary {
            border-left-color: var(--secondary-500);
        }

        .border-info-500 {
            border-left-color: var(--info-500);
        }

        /* 渐变背景 */
        .bg-gradient-to-r {
            background-image: linear-gradient(to right, var(--bg-start), var(--bg-end));
        }

        .from-primary-50 {
            --bg-start: var(--primary-50);
        }

        .to-secondary-50 {
            --bg-end: var(--secondary-50);
        }

        /* 响应式调整 */
        @media (max-width: 640px) {
            .grid-cols-3 {
                gap: 0.5rem;
            }
            
            .topic-tag {
                font-size: 0.625rem;
                padding: 0.125rem 0.5rem;
            }
            
            blockquote {
                padding: 0 0.5rem;
            }
        }
    </style>
</body>
</html>
